<template>
  <div class="update-shop-info" v-loading="loading" >
    <el-form :model="info" v-if="!loading" ref="shopinfoForm" label-width="140px" class="info-list">
      <el-form-item label="商户名称" prop="shopName">
        <el-input class="info-input" v-model="info.shopName" placeholder="和营业执照保持一致"></el-input>
      </el-form-item>
      <el-form-item label="商户简称" prop="shopShortName">
        <el-input class="info-input" v-model="info.shopShortName" placeholder="商户简称"></el-input>
      </el-form-item>
      <el-form-item label="商户简称" prop="shopRegisterName">
        <el-input
          class="info-input"
          v-model="info.shopRegisterName"
          disabled
          placeholder="和营业执照保持一致"
        ></el-input>
      </el-form-item>
      <el-form-item label="所在省" prop="shopProvinces">
        <el-select
          class="info-select"
          v-model="info.shopProvinces"
          @change="handleShopProv"
          placeholder="请选择"
        >
          <el-option
            v-for="item in provinceList"
            :key="item.provinceid"
            :label="item.province"
            :value="item.province"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所在市" prop="shopCity">
        <el-select
          class="info-select"
          v-model="info.shopCity"
          @change="handleShopCity"
          placeholder="请选择"
        >
          <el-option
            v-for="item in cityList"
            :key="item.cityid"
            :label="item.city"
            :value="item.cityid"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所在区" prop="shopAreas">
        <el-select class="info-select" v-model="info.shopAreas" placeholder="请选择">
          <el-option
            v-for="item in areasList"
            :key="item.areaid"
            :label="item.area"
            :value="item.areaid"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商户地址" prop="shopAddress">
        <el-input class="info-input" v-model="info.shopAddress" placeholder="详细地址（不含省市字样）"></el-input>
      </el-form-item>
      <el-form-item label="商户联系人" prop="shopUserName">
        <el-input class="info-input" v-model="info.shopUserName" placeholder="联系人姓名"></el-input>
      </el-form-item>
      <el-form-item label="联系人邮箱" prop="shopUserEmail">
        <el-input class="info-input" v-model="info.shopUserEmail" placeholder="联系人邮箱"></el-input>
      </el-form-item>
      <el-form-item label="联系人电话" prop="shopUserPhone">
        <el-input class="info-input" v-model="info.shopUserPhone" placeholder="联系人电话"></el-input>
      </el-form-item>
      <el-form-item label="支付宝账户" prop="alipayAccount">
        <el-input class="info-input" v-model="info.alipayAccount" placeholder="支付宝账户"></el-input>
      </el-form-item>
      <el-form-item label="客服电话" prop="shopCustomerPhone">
        <el-input class="info-input" v-model="info.shopCustomerPhone" placeholder="客服电话（用于联系商家客服）"></el-input>
      </el-form-item>
      <el-form-item label="行业类别" prop="industryCategory">
        <el-cascader
          class="info-select"
          :options="categoryList"
          :props="{value:'dataValue',label:'dataValue',children:'dataDTOList'}"
          v-model="info.industryCategory"
          change-on-select
        ></el-cascader>
      </el-form-item>
      <div class="info-title">商户结算信息</div>
      <div class="info-tips">注：请保持银行卡信息(证件号码、开户名、卡号、预留手机号)的匹配性</div>
      <el-form-item label="法人身份姓名" prop="legalName">
        <el-input class="info-input" v-model="info.legalName" placeholder="法人身份姓名"></el-input>
      </el-form-item>
      <el-form-item label="法人身份证号" prop="legalIdNumber">
        <el-input class="info-input" v-model="info.legalIdNumber" placeholder="法人身份证号"></el-input>
      </el-form-item>
      <el-form-item label="法人身份证有效期" prop="legalExTime">
        <el-date-picker
          class="info-select"
          :default-value="info.legalExTime"
          v-model="info.legalExTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="法人身份证有效期截至时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结算账户开户名" prop="settleAccountName">
        <el-input class="info-input" v-model="info.settleAccountName" placeholder="结算账户开户名（同公司注册名）"></el-input>
      </el-form-item>
      <el-form-item label="结算账户开户号" prop="settleAccountNumber">
        <el-input class="info-input" v-model="info.settleAccountNumber" placeholder="对公账户号"></el-input>
      </el-form-item>
      <el-form-item label="银行预留手机号" prop="bankPhone">
        <el-input class="info-input" v-model="info.bankPhone" placeholder="如不开通即时到账可不填写"></el-input>
      </el-form-item>
      <el-form-item label="结算账户开户行" prop="settleBank">
        <el-select
          class="info-select"
          filterable
          :filter-method="fiflerBank"
          v-model="info.settleBank"
          @change="handleSettleBank"
          placeholder="请选择"
        >
          <el-option
            v-for="(item,index) in selectBankList"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="结算户支行地址" >
        <el-select
          class="info-select"
          @change="handleBankProv"
          v-model="info.settleBankAddressId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in provinceList"
            :key="item.provinceid"
            :label="item.province"
            :value="item.provinceid"
          ></el-option>
        </el-select>

        <el-select
          class="info-select"
          @change="handleBankCtiy"
          v-model="info.settleBankCity"
          placeholder="请选择"
        >
          <el-option
            v-for="item in bankCityList"
            :key="item.cityid"
            :label="item.city"
            :value="item.cityid"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="结算户开户支行" prop="settleBranchBank">
        <el-select
          class="info-select"
          filterable
          :filter-method="fiflerSettleBank"
          @click="handleSettleBranchBank"
          v-model="info.settleBranchBank"
          placeholder="请选择"
        >
          <el-option
            v-for="(item,index) in selectSettleBankList"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="submitUpdateInfo">确认</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "update-shop-info",
  data() {
    return {
      loading:false,
      rules: {
        shopName: [
          { required: true, message: "请输入商户名称", trigger: "blur" }
        ],
        shopShortName: [
          { required: true, message: "商户简称不能为空", trigger: "blur" }
        ],
        shopRegisterName: [
          { required: true, message: "注册名称不能为空", trigger: "blur" }
        ],
        shopProvinces: [
          { required: true, message: "省份不能为空", trigger: "change" }
        ],
        shopCity: [
          { required: true, message: "城市不能为空", trigger: "change" }
        ],
        shopAreas: [
          { required: true, message: "区域不能为空", trigger: "change" }
        ],
        shopAddress: [
          { required: true, message: "商户地址不能为空", trigger: "blur" }
        ],
        shopUserName: [
          { required: true, message: "商户联系人不能为空", trigger: "blur" }
        ],
        shopUserEmail: [
          { required: true, message: "联系人邮箱不能为空", trigger: "blur" }
        ],
        shopUserPhone: [
          { required: true, message: "联系人电话不能为空", trigger: "blur" }
        ],
        alipayAccount: [
          { required: true, message: "支付宝账户不能为空", trigger: "blur" }
        ],
        shopCustomerPhone: [
          { required: true, message: "客服电话不能为空", trigger: "blur" }
        ],
        industryCategory: [
          { required: true, message: "行业类别不能为空", trigger: "change" }
        ],
        shopIdNumber: [
          { required: true, message: "执照证件号码不能为空", trigger: "blur" }
        ],
        legalName: [
          { required: true, message: "法人代表名称不能为空", trigger: "blur" }
        ],
        legalIdNumber: [
          { required: true, message: "法人身份证不能为空", trigger: "blur" }
        ],
        legalExTime: [
          { required: true, message: "法人身份证有效期不能为空", trigger: "blur" }
        ],
        settleAccountName: [
          { required: true, message: "结算账户开户名不能为空", trigger: "blur" }
        ],
        settleAccountNumber: [
          { required: true, message: "结算账户开户号不能为空", trigger: "blur" }
        ],
        bankPhone: [
          { required: true, message: "银行预留手机号不能为空", trigger: "blur" }
        ],
        settleBank: [
          {
            required: true,
            message: "结算账户开户行不能为空",
            trigger: "change"
          }
        ],
        settleBranchBank: [
          {
            required: true,
            message: "结算户开户支行不能为空",
            trigger: "change"
          }
        ]
      },
      info: {
        mobilePhone:'',
        shopName: "", // 商户名称
        shopShortName: "", // 商户简称
        shopRegisterName: "", // 注册名称
        shopProvinces: "", // 省份
        shopCity: "", // 城市
        shopAreas: "", // 区
        shopAddress: "", // 商户地址
        shopUserName: "", // 商户联系人
        shopUserEmail: "", // 联系人邮箱
        shopUserPhone: "", //  联系人电话
        alipayAccount: "", // 支付宝账户
        shopCustomerPhone: "", // 客服电话
        industryCategory: [], // 行业类别
        settleAccountType: 1, // 结算账户类型 1 对公 2 对私
        legalName: "", // 法人代表姓名
        legalIdNumber: "", // 法人身份证号
        legalExTime: "", // 法人身份证有效期
        settleAccountName: "", // 结算账户开户名
        settleAccountNumber: "", // 结算账户开户号
        bankPhone: "", // 银行预留手机号
        settleBank: "", // 结算账户开户行
        settleBankAddressId: "", // 结算户支行地址
        settleBankCity:'',
        settleBranchBank: "" // 结算户开户支行
      },
      provinceList: [],
      cityList: [],
      categoryList: [],
      areasList: [],
      // bankProvince:"",
      // bankCity:"",
      settleBankList: [],
      selectSettleBankList: [],
      bankCityList: [],
      selectBankList: []
    };
  },
  props: {
    shopInfo: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  created() {
    for(let key in this.info){
      this.info[key] = this.shopInfo[key]
    }
    this.info.industryCategory = this.shopInfo.industryCategory.split("|")
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      this.getBankList(); // 获取银行卡列表
      this.getProvinceList(); // 获取省份信息
      this.getCategoryList(); // 行业分类
      this.loading = true;
      new Promise((resolve,reject)=>{
        try{
          this.getBankCityList(this.info.settleBankAddressId); // 获取默认选择的省份下的城市
          this.handleBankCtiy(this.info.settleBankCity); // 获取默认的选择银行地址
          resolve();
        }catch(err){
          reject(err)
        }
      }).then(res=>{
        this.loading = false;
      }).catch(err=>{
        console.log(err);
      })
    },
    handleCancel() {
      this.$emit("close-box");
    },
    getProvinceList() {
      let url = `user/app/province/queryall`;
      this.$Http
        .post(url, ``)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.provinceList = res.data.result;
          } else {
            this.$message(res.data.resp_message);
          }
        })
        .catch(err => {
          this.$message("获取省份信息失败！");
        });
    },
    getCategoryList() {
      let url = `user/data/findIndustryCategory`;
      this.$Http
        .get(url, "")
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.categoryList = res.data.result;
          } else {
            this.$mesasge(res.data.resp_message);
          }
        })
        .catch(err => {
          this.$message.error("获取行业类别列表失败！");
        });
    },
    getBankList() {
      let url = `user/app/bankbranch/query/all`;
      this.$Http
        .get(url, ``)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.bankList = res.data.result;
            this.selectBankList = this.bankList.map(item => item);
          }
        })
        .catch(err => {
          console.log("获取银行列表失败！");
        });
    },
    fiflerBank(query) {
      if (query !== "") {
        this.selectBankList = this.bankList.filter(item => {
          return item.indexOf(query) > -1;
        });
      } else {
        this.selectBankList = this.bankList.map(item => item);
      }
    },
    fiflerSettleBank(query) {
      if (query !== "") {
        this.selectSettleBankList = this.settleBankList
          .filter(item => {
            return item.indexOf(query) > -1;
          })
          .map(item => {
            return item;
          });
      } else {
        this.selectSettleBankList = this.settleBankList.map(item => {
          return item;
        });
      }
    },
    handleSettleBranchBank() {
      if (!this.info.settleBankAddressId || !this.info.settleBankCity) {
        this.$message("请先选择地区！");
        return;
      }
    },
    handleSettleBank(value) {
      if (!this.info.settleBankAddressId && !this.info.settleBankCity) {
        return;
      }
      this.handleBankCtiy(this.info.settleBankCity);
    },
    getBankCityList(value){
       let url = `user/app/city/queryall`;
      let params = `provinceid=${value}`;
      this.$Http
        .post(url, params)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.bankCityList = res.data.result;

          } else {
            this.$message(res.data.resp_message);
          }
        })
        .catch(err => {
          this.$message("获取列表失败！");
        });
    },
    handleBankProv(value) {
      //   console.log("handleBankProv", value);
      this.info.settleBankCity = "";
      this.info.settleBranchBank = "";
      this.getBankCityList(value);
    },
    handleShopCity(cityid) {
      this.info.shopAreas = "";
      let url = `user/app/queryAreaListByCityId?cityId=${cityid}`;
      this.$Http
        .get(url)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.areasList = res.data.result;
          } else {
            this.$message.warning(res.data.resp_message);
          }
        })
        .catch(err => {
          this.$message.error("获取县区信息失败！");
        });
    },
    handleShopProv(value) {
      this.info.shopCity = "";
      this.info.shopAreas = "";
      // let target = this.provinceList.find(item => {
      //   return item.province == value;
      // });
      // let v = null;
      // target && (v = target.provinceid);
      let url = `user/app/city/queryall`;
      let params = `provinceid=${value}`;
      this.$Http
        .post(url, params)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.cityList = res.data.result;
          } else {
            this.$message(res.data.resp_message);
          }
        })
        .catch(err => {
          this.$message("获取列表失败！");
        });
    },
    handleBankCtiy(value) {
      if (!this.info.settleBankAddressId || !this.info.settleBank) {
        this.$message("请先选择银行和地址！");
        return;
      }
      let url = `user/app/findAllBackGround/query/topname`;
      let params = `province=${
        this.info.settleBankAddressId
      }&city=${value}&topName=${this.info.settleBank}`;
      this.$Http
        .post(url, params)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.settleBankList = res.data.result;
            this.selectSettleBankList = this.settleBankList.map(item => {
              return item;
            });
          } else {
            this.$message.warning(res.data.resp_message);
          }
        })
        .catch(err => {
          this.$message("获取支行失败！");
        });
    },
    submitUpdateInfo() {
      if (!this.checkInfo()) {
        return;
      }
      let token = sessionStorage.getItem(1);
      let url = `user/shopRegister/purchase/${token}`;
      let submitinfo = { ...this.info };
      submitinfo.industryCategory = this.info.industryCategory.join("|");
      let params = [];
      for (let key in submitinfo) {
        if (submitinfo[key] !== "" && submitinfo[key] !== null && submitinfo[key] !== undefined) {
          params.push(`${key}=${submitinfo[key]}`)
        }
      }
      params = encodeURI(params.join('&'));
      this.$Http
        .post(url, params)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.$notify({
              title: "成功",
              message: "修改成功",
              type: "success"
            });
            this.$emit("close-box");
          } else {
            this.$notify({
              title: "温馨提示",
              message: res.data.resp_message
            });
          }
        })
        .catch(err => {
          this.$notify({
            title: "温馨提示",
            message: "修改商户信息失败！请重新尝试！",
            type: "warning"
          });
        });
    },
    checkInfo() {
      let status = false;
      this.$refs.shopinfoForm.validate(valid => {
        status = valid;
        if (!valid) {
          this.$notify({
            title: "警告",
            message: "填写的信息有误！无法提交！请重新填写！",
            type: "warning"
          });
          return false;
        }
      });
      return status;
    }
  }
};
</script>
<style scoped>
.info-title {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  border-bottom: 1px solid #dbdbdb;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.info-tips {
  color: red;
}
.info-input,
.info-select {
  flex-grow: 1;
  width: 100%;
}
</style>